<?php
$con = new mysqli("localhost", "root", "", "excel");
mysqli_query($con,"set names 'utf8'"); //数据库输出编码
//连接数据库
//    $conn=mysql_connect('localhost','root',''); //连接数据库
//    mysql_query("set names 'utf8'"); //数据库输出编码
//    mysql_select_db('excel',$conn); //打开数据库

$query = $con->query("select * from test");

//     while($row=mysql_fetch_object($query))
//     {
//     echo "用户ID：".$row->id."<br>"; //通过对象运算符->获得改行数据在其属性上的值。
//     echo "用户名：".$row->prov."<br>";
//     echo "用户名：".$row->city."<br>";
//     echo "用户名：".$row->sales."<br>";
//     }
//     mysql_close(); //关闭MySQL连接
//     die();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>bofan百家城市</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        table.altrowstable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #a9c6c9;
            border-collapse: collapse;
        }
        table.altrowstable th {
            border-width: 1px;
            padding: 12px;
            border-style: solid;
            border-color: #a9c6c9;
        }
        table.altrowstable td {
            border-width: 1px;
            padding: 8px;
            width: 100px !important;
            border-style: solid;
            border-color: #a9c6c9;
        }
        .oddrowcolor{
            background-color:#d4e3e5;
        }
        .evenrowcolor{
            background-color:#c3dde0;
        }
        div{
            float:left;
        }
    </style>
</head>
<body>

<div id="main" style="width:35%;height:100%;float: left"></div>
<div id="xiao" style="width:25%;height:100%;float: left"></div>
<div id="shi" style="width:15%;height:100%;float: left"></div>
<h2>总开发省份:<?php
    $query = $con->query("SELECT COUNT(DISTINCT prov) FROM test");
    echo mysqli_fetch_array($query)[0];
    ?></h2>
<h2>总开发城市:<?php
    $query = $con->query("SELECT COUNT(city) FROM test");
    echo mysqli_fetch_array($query)[0];
    ?></h2>
<div id="view" style="height:100%;width:25%;">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>省份</th><th>城市</th><th>销量</th>
        </tr>
        <?php
        $query = $con->query("select * from test order by sales DESC");
        while($row=mysqli_fetch_assoc($query)){
            ?>
            <tr>
                <td><?php echo $row['prov']?></td><td><?php echo $row['city']?></td><td><?php echo $row['sales']?></td>
            </tr>
        <?php }?>
    </table>
</div>
<script src="js/esl.js" type="text/javascript"></script>
<script type="text/javascript">

    var fileLocation ='js/echarts-map';
    require.config({
        paths:{
            'echarts': fileLocation
        }
    });

    // 作为入口
    require(
        [
            'echarts',
            'echarts/chart/map',
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('main'));
            option = {
//         		backgroundColor: '#2c343c',
                title : {
                    text: '中国电商百家城市',
                    subtext: '有个地主',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                dataRange: {
                    min: 0,
                    max: 100000,
                    x: 'left',
                    y: 'bottom',
                    text:['高','低'],            // 文本，默认为数值文本
                    calculable : true
                },
                toolbox: {
                    show : true,
                    orient : 'vertical',
                    x: 'right',
                    y: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '总销量',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            <?php
                            $query = $con->query("select prov,count(prov),sum(sales) from test group by prov");
                            while($row=mysqli_fetch_assoc($query)){
                                echo '{name: ["'.$row['prov'].'"],value: ['.$row['sum(sales)'].']},';
                            }
                            ?>
                        ],
                    },
                ]
            };

            console.log('egge');
            function eConsole(param) {
                console.log(param['name']);
            }
            myChart.on("hover", eConsole);
            myChart.setOption(option);
        }
    );


    function altRows(id){
        if(document.getElementsByTagName){

            var table = document.getElementById(id);
            var rows = table.getElementsByTagName("tr");

            for(i = 0; i < rows.length; i++){
                if(i % 2 == 0){
                    rows[i].className = "evenrowcolor";
                }else{
                    rows[i].className = "oddrowcolor";
                }
            }
        }
    }

    window.onload=function(){
        altRows('alternatecolor');
    }
</script>
</body>
</html>
